<template>
	<view class="job-container">
		<view class="job-header">
			<text class="job-title">{{jobInfo.postName}}</text>
			<text class="job-salary">{{jobInfo.salaryRange}}</text>
		</view>
		<view class="job-company">
			<text>{{jobInfo.customerName}} | {{jobInfo.postDuty}}</text>
			<text class="job-num">需{{jobInfo.demandQuantity}}人</text>
		</view>
		<view class="job-location">
			<text>地址：{{jobInfo.address}}</text>
			<text class="job-distance">{{jobInfo.distance}}km</text>
		</view>
		<view class="job-region">
			<text>{{jobInfo.region}}</text>
		</view>
		<button class="recommend-btn" @click="recommendJob">推荐</button>
	</view>
</template>

<script>
	export default {
		props: {
			jobInfo: Object
		},
		data() {
			return {
				job: {
					title: '总裁/总经理/CEO',
					salary: '80元/时',
					companyName: '苏州大疆有限公司',
					department: '大疆',
					quantity: 5,
					address: '苏州XXXX区XXXX街道XXXX路XX号',
					distance: 20,
					region: '广州市 花都区'
				}
			};
		},
		methods: {
			recommendJob() {
				uni.showToast({
					title: '推荐成功',
					icon: 'none'
				});
			}
		}
	};
</script>

<style lang="scss">
	.job-container {
		padding: 20rpx;
	}

	.job-header {
		display: flex;
		justify-content: space - between;
		margin-bottom: 10rpx;

		text {
			font-size: 30rpx;
		}

		.job-salary {
			color: green;
		}
	}

	.job-company {
		margin-bottom: 10rpx;

		text {
			font-size: 28rpx;
		}

		.job-num {
			float: right;
		}
	}

	.job-location {
		margin-bottom: 10rpx;

		text {
			font-size: 28rpx;
		}

		.job-distance {
			float: right;
		}
	}

	.job-region {
		margin-bottom: 10rpx;

		text {
			font-size: 28rpx;
		}
	}

	.recommend-btn {
		background-color: #1aad19;
		color: white;
		width: 100%;
	}
</style>